<template>
  <el-col :span="18">
  <el-row>
    <el-col :span="4" v-for="(book,index) in books" v-bind:key="index" :offset="1">
    <BriefIntroduction
      :BookName = book.BookName
      :Author = book.Author
      :Price = book.Price
     >
            <el-image style="width: 100px; height: 100px"
                      :src=book.BookImgRoot
            ></el-image>
    </BriefIntroduction>
    </el-col>
  </el-row>
  </el-col>
</template>

<script>
import BriefIntroduction from './BriefIntroduction'
export default {
  name: 'BookList',
  components: {
    BriefIntroduction
  },
  // watch: {
  //   from () {
  //     location.reload()
  //   },
  //   tag () {
  //     location.reload()
  //   },
  //   bookName () {
  //     location.reload()
  //   }
  // },
  // 从后台获取书籍信息
  created () {
    console.log(this.from)
    console.log(this.bookName)
    console.log(this.tag)
    if (this.from === 'search') {
      if (this.bookName !== '') {
        this.getBooksByName()
      }
    } else if (this.from === 'sidebar') {
      if (this.tag !== '') {
        this.getBooksByTag()
      }
    }
  },
  methods: {
    getBooksByName () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/booksInfo/findByName')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let book = {bookName: this.bookName}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            console.log(xmlhttp.responseURL)
            console.log(xmlhttp.response)
            that.dealResponse(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(book))
    },
    getBooksByTag () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/booksInfo/findByTag')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let book = {tag: this.tag}
      console.log(this.tag)
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            console.log(xmlhttp.responseURL)
            console.log(xmlhttp.response)
            that.dealResponse(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(book))
    },
    dealResponse (res) {
      let books = JSON.parse(res)
      console.log(books[0])
      for (var i = 0; i < books.length; i++) {
        let tem = {
          BookName: books[i].bookName,
          Author: books[i].writer,
          BookImgRoot: ('http://127.0.0.1:3100/images/' + books[i].image),
          Price: books[i].price
        }
        this.books.push(tem)
      }
      console.log(this.books)
    }
  },
  props: {
    bookName: {
      required: true
    },
    tag: {
      required: true
    },
    from: {
      required: true
    }
  },
  data () {
    return {
      books: [
      ]
    }
  }
}
</script>

<style scoped>

</style>
